<template>
    <div id="app">
        <div id="searchData">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="searchForm.storeName" placeholder="——请按照店名搜索——"
                              class="center-text"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="searchStore" icon="el-icon-search">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addLabels" icon="el-icon-circle-plus-outline">添加</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="flushedLabels" icon="el-icon-refresh">刷新</el-button>
                </el-form-item>
            </el-form>

        </div>
        <div id="myTable">
            <el-table
                    :data="tableData"
                    height="389"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="store.storeName"
                        label="门店"
                        width="180">
                </el-table-column>

                <el-table-column
                        prop="labelContent"
                        label="门店标签">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="270">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="editLabel(scope.row)" icon="el-icon-edit-outline">编辑
                        </el-button>
                        <el-button type="danger" @click="deleteLabel(scope.row.labelId)"
                                   icon="el-icon-remove-outline">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="pagination">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="searchForm.currentPage"
                    :page-sizes="[1, 5, 10, 20]"
                    :page-size="searchForm.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <div id="dialog">
            <!--添加和编辑的对话框-->
            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                <el-form ref="addEditform" :model="addEditform" :rules="rules" label-width="80px">
                    <el-form-item label="门店" prop="storeId">
                        <el-select placeholder="请选择门店" v-model="addEditform.storeId" style="width: 100%;">
                            <el-option
                                    v-for="item in stores"
                                    :label="item.storeName"
                                    :value="item.storeId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标签" prop="labelContent">
                        <el-input v-model="addEditform.labelContent"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
    <el-button @click="cancelbutt">取 消</el-button>
    <el-button type="primary" @click="enterAdd" v-if="actor=='add'">确定添加</el-button>
    <el-button type="primary" @click="enterEdit" v-if="actor=='edit'">确定编辑</el-button>
  </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //确认按钮类型
            actor: '',
            //table默认数据
            tableData: undefined,
            total: 0,
            //对话框默认值
            dialogVisible: false,
            searchForm: {
                //默认当前页
                currentPage: 1,
                //默认页大小
                pageSize: 5,
                storeName: "",
            },
            //增加和修改框的值
            addEditform: {
                storeId: '',
                labelContent: '',
            },

            //门店信息
            stores: [],
            rules: {
                storeId: [{required: true, message: '店铺不能为空', trigger: 'change'}],
                labelContent: [{required: true, message: '标签不能为空', trigger: 'change'}],
            }
        }
    },
    created() {
        this.loadLabels();
        this.loadStoreMsg();
    },
    methods: {
        //加载店铺信息
        loadStoreMsg() {
            this.$http.get("/store/selectStoreByUserId").then(resp => {
                console.log(resp.data.data);
                this.stores = resp.data.data;
            })
        },

        //加载Labels
        loadLabels() {
            this.$http.post("store/labels/selectLabels", this.searchForm).then(resp => {
                console.log(resp.data.data.records);
                this.tableData = resp.data.data.records;
                this.total = resp.data.data.total;
            })
        },
        //对话框关闭方法
        handleClose() {
            this.dialogVisible = false
            this.addEditform = {}
            this.loadLabels();
        },
        //取消按钮
        cancelbutt() {
            this.dialogVisible = false
            this.addEditform = {};
            this.loadLabels();
        },
        //删除数据
        deleteLabel(num) {
            console.log(num)

            this.$confirm('是否删除该数据？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.get("store/labels/deleteLabels?labelId=" + num).then(resp => {
                    if (resp.data.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.searchForm.currentPage = 1;
                        this.loadLabels();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        //编辑按钮
        editLabel(row) {
            console.log(row);
            this.actor = "edit"
            this.dialogVisible = true;
            this.addEditform.storeId = row.storeId
            this.addEditform = row;

        },
        //确认添加方法
        enterAdd() {
            this.$refs.addEditform.validate((valid) => {
                console.log(valid);
                if (valid) {
                    this.actor = ''
                    console.log(this.addEditform, "--------------");
                    this.$http.post("/store/labels/insertLabels", this.addEditform).then(resp => {
                        if (resp.data.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '添加成功!'
                            });
                            this.loadLabels();
                        }
                    })
                    this.addEditform = {}
                    this.dialogVisible = false;
                }
            })
        },
        //确认编辑方法
        enterEdit() {
            this.$refs.addEditform.validate((valid) => {
                console.log(valid);
                if (valid) {
                    this.actor = "";
                    console.log(this.addEditform, "-------------")
                    this.$http.post("/store/labels/updateLabels", this.addEditform).then(resp => {
                        if (resp.data.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '更新成功!'
                            });
                            this.loadLabels();
                        }
                    })
                    this.addEditform = {}
                    this.dialogVisible = false;
                }
            })
        },
        //搜索店名
        searchStore() {
            this.searchForm.currentPage= 1;
            this.loadLabels();
        },
        //添加按钮的方法
        addLabels() {
            this.actor = "add";
            this.dialogVisible = true;
        },
        //刷新按钮
        flushedLabels() {
            this.searchForm.storeName='';
            this.loadLabels();
        },
        //修改页大小
        handleSizeChange(num) {
            this.searchForm.pageSize = num;
            this.loadLabels();
        },
        //修改当前页
        handleCurrentChange(num) {
            this.searchForm.currentPage = num;
            this.loadLabels();
        },
    }
}
</script>
<style scoped>
#searchData {
    float: left;
}
</style>